<template>
	<view class="CarList">
	<unicloud-db   ref="shoucangDB" v-slot:default="{data, loading, error, options}" collection="Favorite">
		<view v-if="error">{{error.message}}</view>
		<view v-else>
			<view  v-for="(item,index) in data ":key="index"  class="itembox">
				     <view class="imgItem" >
								<image mode="aspectFill" :src="item.cover" >
								</image>
								<view class="bigchaper">
								<view class="contentbox">
									<text class="titleTag titleHeader">{{item.title}}</text>
								<!-- 	  <text class="titleTag">阅读状态</text>
									 <text class="titleTag">阅读进度</text>
									  <text class="titleTag">阅读进度</text> -->
								</view>
								<view class="boxRight Continuation" v-if="$store.state.edit"> 
								<span  class="iconfont icon-airudiantubiaohuizhi-zhuanqu_aidushu"></span>
									<text class="spanTitle" @click="toread()" >续看</text>
								</view>
								<view class="boxRight cancel" v-else>
							    <span class="iconfont icon-shanchu"  @click="rmItem(item._id)"></span>
								</view>
								
									</view>
					</view>
			</view>	
			</view>	
		 </unicloud-db>
	</view>
</template>

<script>

	export default {
		data() {
			return {
		     
		}
		},
		methods: {
			//跳转阅读界面
		toread(){
			uni.navigateTo({
				url: '/pages/read/read'
			})
		},
		//删除收藏
		rmItem(id){
			this.$refs.shoucangDB.remove(id);
		}
		
		
		},
		
		}
	
</script>

<style>
	/* 最外层*/
.CarList{
	width: 100%;
}
/* 卡片盒子  */
.CarList .itembox{
	width: 100%;
	height: 115px;
	margin-top: 8px;
	
}
/* 图片 */
.itembox image{
	   height:110px;
		width:90px;
	background-size: cover;
	margin-right: 8px;
	margin-left: 8px;
	border-radius: 8px;
}
.imgItem{

	display: flex;
}
/* 标签盒子 */
.contentbox{
display: flex;
flex-direction: column;
margin-top: 2px;
}
/* 标题 */
.titleTag{
	margin-bottom: 5px;
	color: #8a8a8a;
	font-size: 12px;
}
/* 标头 */
.contentbox .titleHeader{
	color: black;
	font-size: 18px;
}
/* 盒子右边 */
.bigchaper{
	width: 80%;
	display: flex;
	flex-direction: row;
	align-items: center;
	justify-content: space-between;
}

/* 续看 */
.boxRight{
	width: 50px;
	padding: 20px;
	
}
.cancel:active{
   color: orange;
}
.boxRight span{
	width: 15px;
	height: 15px;
}
</style>
